<!DOCTYPE html>
<html>
<head>
<title>Web Components Example: Timezone Selection via Image (decorator)</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700|Droid+Sans+Mono|Ovo" type="text/css">
<link rel="stylesheet" href="../assets/styles/main.css" type="text/css">
<link rel="stylesheet" href="../assets/styles/prettify.css" type="text/css" />
<script src="../assets/scripts/prettify.js"></script>
</head>
<body>
<h2>Web Components Example</h2>
<h1>Timezone Selection via Image</h1>
<p>Using decorator.</p>
<pre class="prettyprint"><code>
&lt;decorator id=&quot;timezone-map&quot;&gt;
    &lt;script&gt;
        var timezones = [&#x27;pst&#x27;, ... ];

        function createHandler(timezone)
        {
            this.listen({
                selector: &#x27;#&#x27; + timezone,
                type: &#x27;click&#x27;,
                handler: function() {
                    // Decorators are late-bound, so we must check for type.
                    if (this instanceof HTMLSelectElement)
                        this.selectedIndex = this[timezone].index;
                }
            });
        }

        timezones.forEach(createHandler, this);
    &lt;/script&gt;
    &lt;template&gt;
        &lt;svg ...&gt;
            &lt;g id=&quot;worldShapes&quot;&gt; ... &lt;/g&gt;
            &lt;g id=&quot;timezoneShapes&quot;&gt;
                &lt;path id=&quot;PST&quot; ...&gt;
                &lt;path id=&quot;CST&quot; ...&gt;
            &lt;/g&gt;
            ...
        &lt;/svg&gt;
    &lt;/template&gt;
&lt;/decorator&gt;
</code></pre>
</body>
</html>